<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>图表测试 - LayUI模块化应用</title>
    <link rel="stylesheet" href="https://registry.npmmirror.com/layui/2.11.6/files/dist/css/layui.css">
    <link rel="stylesheet" href="css/common.css">
</head>
<body>
    <div class="layui-layout layui-layout-admin">
        <!-- 头部组件 -->
        <div id="header-container"></div>
        
        <!-- 侧边栏组件 -->
        <div id="sidebar-container"></div>
        
        <!-- 内容主体区域 -->
        <div class="layui-body">
            <div class="layui-fluid content-wrapper">
                <div class="content-header">
                    <h2>图表测试</h2>
                </div>
                
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md6">
                        <div class="layui-card">
                            <div class="layui-card-header">折线图</div>
                            <div class="layui-card-body">
                                <div id="lineChart" style="height: 300px;"></div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-card">
                            <div class="layui-card-header">柱状图</div>
                            <div class="layui-card-body">
                                <div id="barChart" style="height: 300px;"></div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md6">
                        <div class="layui-card">
                            <div class="layui-card-header">饼图</div>
                            <div class="layui-card-body">
                                <div id="pieChart" style="height: 300px;"></div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-card">
                            <div class="layui-card-header">散点图</div>
                            <div class="layui-card-body">
                                <div id="scatterChart" style="height: 300px;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 底部组件 -->
        <div id="footer-container"></div>
    </div>

    <script src="https://registry.npmmirror.com/layui/2.11.6/files/dist/layui.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://registry.npmmirror.com/echarts/5.4.3/files/dist/echarts.min.js"></script>
    <script src="js/common.js"></script>
    <script>
        // 页面特定的JS代码
        layui.use(['element', 'layer'], function() {
            var element = layui.element;
            var layer = layui.layer;
            
            // 页面加载完成后执行
            $(document).ready(function() {
                // 加载组件
                loadComponents();
                
                // 初始化图表
                initCharts();
            });
        });
        
        // 加载组件函数
        function loadComponents() {
            // 加载头部
            $('#header-container').load('components/header.html', function() {
                layui.element.render();
            });
            
            // 加载侧边栏
            $('#sidebar-container').load('components/sidebar.html', function() {
                layui.element.render();
                // 设置当前页面激活状态
                $('#nav-charts').addClass('layui-this');
            });
            
            // 加载底部
            $('#footer-container').load('components/footer.html');
        }
        
        // 初始化图表函数
        function initCharts() {
            // 折线图
            var lineChart = echarts.init(document.getElementById('lineChart'));
            var lineOption = {
                title: {
                    text: '月度数据趋势',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    type: 'category',
                    data: ['1月', '2月', '3月', '4月', '5月', '6月']
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    name: '访问量',
                    type: 'line',
                    data: [120, 200, 150, 80, 70, 110],
                    smooth: true
                }]
            };
            lineChart.setOption(lineOption);
            
            // 柱状图
            var barChart = echarts.init(document.getElementById('barChart'));
            var barOption = {
                title: {
                    text: '产品销量对比',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    type: 'category',
                    data: ['产品A', '产品B', '产品C', '产品D', '产品E']
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    name: '销量',
                    type: 'bar',
                    data: [320, 302, 301, 334, 390],
                    itemStyle: {
                        color: '#5470c6'
                    }
                }]
            };
            barChart.setOption(barOption);
            
            // 饼图
            var pieChart = echarts.init(document.getElementById('pieChart'));
            var pieOption = {
                title: {
                    text: '访问来源分布',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [{
                    name: '访问来源',
                    type: 'pie',
                    radius: '50%',
                    data: [
                        {value: 1048, name: '搜索引擎'},
                        {value: 735, name: '直接访问'},
                        {value: 580, name: '邮件营销'},
                        {value: 484, name: '联盟广告'},
                        {value: 300, name: '视频广告'}
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }]
            };
            pieChart.setOption(pieOption);
            
            // 散点图
            var scatterChart = echarts.init(document.getElementById('scatterChart'));
            var scatterData = [];
            for (var i = 0; i < 100; i++) {
                scatterData.push([
                    Math.random() * 100,
                    Math.random() * 100
                ]);
            }
            var scatterOption = {
                title: {
                    text: '数据分布散点图',
                    left: 'center'
                },
                xAxis: {
                    type: 'value'
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    name: '数据点',
                    type: 'scatter',
                    data: scatterData,
                    symbolSize: 8
                }]
            };
            scatterChart.setOption(scatterOption);
            
            // 响应式处理
            window.addEventListener('resize', function() {
                lineChart.resize();
                barChart.resize();
                pieChart.resize();
                scatterChart.resize();
            });
        }
    </script>
</body>
</html>